<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="images/favicon.png" type="image/png">
    <title>超市订单管理系统V1.0</title>
    <link href="css/style.default.css" rel="stylesheet">
    <link href="css/jquery.datatables.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
  <script src="js/respond.min.js"></script>
  <![endif]-->
</head>

<body>
    <!-- Preloader -->
    <div id="preloader">
        <div id="status"><i class="fa fa-spinner fa-spin"></i></div>
    </div>
    <section id="recycleVue">
        <div class="leftpanel">
            <div class="logopanel">
                <h4>超市订单管理系统</h4>
            </div>
            <!-- logopanel -->
            <div class="leftpanelinner">
                <!-- This is only visible to small devices -->
                <div class="visible-xs hidden-sm hidden-md hidden-lg">
                    <div class="media userlogged">
                        <img alt="" src="images/photos/loggeduser.png" class="media-object">
                        <div class="media-body">
                            <h4>John Doe</h4>
                            <span>"Life is so..."</span>
                        </div>
                    </div>
                    <h5 class="sidebartitle actitle">Account</h5>
                    <ul class="nav nav-pills nav-stacked nav-bracket mb30">
                        <li><a href="profile.html"><i class="fa fa-user"></i> <span>Profile</span></a></li>
                        <li><a href="signout.html"><i class="fa fa-sign-out"></i> <span>Sign Out</span></a></li>
                    </ul>
                </div>
                <h5 class="sidebartitle">功能选项</h5>
                <ul class="nav nav-pills nav-stacked nav-bracket">
                    <li><a href="index.html"><i class="fa fa-home"></i> <span>主页</span></a></li>
                    <li><a href="add-userIndex.html"><i class="fa fa-user"></i> <span>员工管理</span></a></li>
                    <li><a href="add-supplierIndex.html"><i class="fa fa-male"></i> <span>供应商管理</span></a></li>
                    <li><a href="add-orderIndex.html"><i class="fa fa-book"></i> <span>订单管理</span></a></li>
                    <li class="active"><a href="recycle.html"><i class="fa fa-recycle"></i> <span>回收站</span></a></li>
                </ul>
                <div class="infosummary">
                    <h5 class="sidebartitle">Information Summary</h5>
                    <ul>
                        <li>
                            <div class="datainfo">
                                <span class="text-muted">Daily Traffic</span>
                                <h4>630, 201</h4>
                            </div>
                            <div id="sidebar-chart" class="chart"></div>
                        </li>
                        <li>
                            <div class="datainfo">
                                <span class="text-muted">Average Users</span>
                                <h4>1, 332, 801</h4>
                            </div>
                            <div id="sidebar-chart2" class="chart"></div>
                        </li>
                        <li>
                            <div class="datainfo">
                                <span class="text-muted">Disk Usage</span>
                                <h4>82.2%</h4>
                            </div>
                            <div id="sidebar-chart3" class="chart"></div>
                        </li>
                        <li>
                            <div class="datainfo">
                                <span class="text-muted">CPU Usage</span>
                                <h4>140.05 - 32</h4>
                            </div>
                            <div id="sidebar-chart4" class="chart"></div>
                        </li>
                        <li>
                            <div class="datainfo">
                                <span class="text-muted">Memory Usage</span>
                                <h4>32.2%</h4>
                            </div>
                            <div id="sidebar-chart5" class="chart"></div>
                        </li>
                    </ul>
                </div>
                <!-- infosummary -->
            </div>
            <!-- leftpanelinner -->
        </div>
        <div class="mainpanel">
            <div class="headerbar">
                <a class="menutoggle"><i class="fa fa-bars"></i></a>
                <div class="header-right">
                    <ul class="headermenu">
                        <li>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    <img src="images/photos/loggeduser.png" alt="" /> John Doe
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                                    <li><a href="profile.html"><i class="glyphicon glyphicon-user"></i> My Profile</a></li>
                                    <li><a href="signin.html"><i class="glyphicon glyphicon-log-out"></i> Log Out</a></li>
                                </ul>
                            </div>
                        </li>
                        
                    </ul>
                </div>
                <!-- header-right -->
            </div>
            <!-- headerbar -->
            <!-- headerbar -->
            <div class="pageheader">
                <h2><i class="fa fa-recycle"></i>主页<span>回收站</span></h2>
                <div class="breadcrumb-wrapper">
                    <span class="label">当前页</span>
                    <ol class="breadcrumb">
                        <li><a href="index.html">管理系统</a></li>
                        <li class="active">回收站</li>
                    </ol>
                </div>
            </div>
            <div class="contentpanel">   <!--员工回收页-->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="panel-btns">
                            <a href="" class="panel-close">&times;</a>
                            <a href="" class="minimize">&minus;</a>
                        </div>
                        <!-- panel-btns -->
                        <h3 class="panel-title">被删除的各类信息</h3>
                        <p>以下是被删除的各类信息，可对这些信息进行恢复</p>

                    </div>
                    <div class="panel-body">
                        <h4 class="subtitle mb5">被删除的员工信息</h4>
                        <p class="m20">以下是被删除的员工的信息，可对这些信息进行恢复</p>
                        <div  class="col-md-6 input-group" style="width: 300px; padding-top: 10px;">
                            <input v-model="searchTxt" type="text"  class="form-control">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
                        </div>
                      <br />
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>员工id</th>
                                    <th>姓名</th>
                                    <th>性别</th>
                                    <th>职位</th>
                                    <th>手机</th>
                                    <th>住址</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>

                                <!--  <tr class="odd gradeX">
                                     <td>1</td>
                                     <td>1</td>
                                     <td>1</td>
                                     <td>1</td>
                                     <td class="center">1</td>
                                     <td class="center">1</td>
                                     <td class="table-action">
                                        <input type="checkbox"  value="1">
                                     </td>
                                 </tr> -->

                                <!--  <tr v-for="item in userList">
                                     <td v-text="item.id"></td>
                                     <td v-text="item.name"></td>
                                     <td v-text="item.gender"></td>
                                     <td v-text="item.gender"></td>
                                     <td class="center" v-text="item.gender"></td>
                                     <td class="center" v-text="item.gender"></td>
                                     <td class="table-action">
                                        <a title="编辑"><i class="fa fa-pencil"></i></a>
                                        <a title="删除" class="delete-row" ><i class="fa fa-trash-o"></i></a>
                                        <a title="查看详情" onclick="checkDetails()" class="details"><i class="fa fa-list" ></i></a>
                                     </td>
                                 </tr> -->

                                <tr v-for="item in userList | filterBy searchTxt" >



                                    <td>
                                        <div class="content">{{item.id}}

                                        </div>
                                    </td>
                                    <td>
                                        <div class="content">{{item.name}}

                                        </div>
                                    </td>
                                    <td>
                                        <div class="content">{{item.gender}}

                                        </div>
                                    </td>
                                    <td>
                                        <div class="content">{{item.position}}

                                        </div>
                                    </td>
                                    <td>
                                        <div class="content">{{item.telephone}}

                                        </div>
                                    </td>
                                    <td>
                                        <div class="content">{{item.address}}

                                        </div>
                                    </td>
                                    <td class="table-action">
                                        <a href="#" title="查看详情" data-toggle="modal" data-target=".bs-example-modal-static" v-on:click="checkOneUser(item.id)"><i class="fa fa-list"></i></a>
                                        <a href="#" title="恢复" v-on:click="recyUser(item.id)"><i class="fa fa-recycle"></i></a>
                                        <a href="#" title="删除" v-on:click="deleteUser(item.id)"><i class="fa fa-exclamation-triangle"></i></a>


                                    </td>
                                </tr>

                                </tbody>
                            </table>
                        </div>
                        <!-- table-responsive -->
                        
                        <div class="clearfix mb30"></div>
                            <h4 class="subtitle mb5">被删除的供应商信息</h4>
                        <p class="m20">以下是被删除的供应商的信息，可对这些信息进行恢复</p>
                         <div  class="col-md-6 input-group" style="width: 300px; padding-top: 10px;">
                            <input v-model="searchTxt" type="text"  class="form-control">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
                        </div>
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>供应商id</th>
                                    <th>供应商名称</th>
                                    <th>供应商联系人</th>
                                    <th>联系人手机</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>

                                <tr v-for="item in supplierList | filterBy searchTxtSupplier" >



                                    <td>
                                        <div class="content">{{item.supplierId}}
                                            <input v-model="editSupplier.supplierId" type="text" v-if="item.supplierId==nowEditCol" style="margin-left: -2px;margin-top: 5px;">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="content">{{item.supplierName}}
                                            <input v-model="editSupplier.supplierName" type="text" v-if="item.supplierId==nowEditCol" style="margin-left: -2px;margin-top: 5px;">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="content">{{item.manager.name}}
                                            <input v-model="editSupplier.managerName" type="text" v-if="item.supplierId==nowEditCol" style="margin-left: -2px;margin-top: 5px;">
                                        </div>
                                    </td>

                                    <td>
                                        <div class="content">{{item.manager.telephone}}
                                            <input v-model="editSupplier.managerTelephone" type="text" v-if="item.supplierId==nowEditCol" style="margin-left: -2px;margin-top: 5px;">
                                        </div>
                                    </td>

                                    <td class="table-action">
                                        <a href="#" title="查看详情" data-toggle="modal" data-target=".supplierDetails" v-on:click="checkOneSupplier(item.supplierId)"><i class="fa fa-list"></i></a>
                                        <a href="#" title="恢复" v-on:click="recySupplier(item.supplierId)"><i class="fa fa-recycle"></i></a>
                                        <a href="#" title="删除" v-on:click="deleteSupplier(item.supplierId)"><i class="fa fa-exclamation-triangle"></i></a>
                                    </td>
                                </tr>

                                </tbody>
                            </table>
                        </div>
                        <!-- table-responsive -->

                        <div class="clearfix mb30"></div>
                        <h4 class="subtitle mb5">被删除的订单信息</h4>
                        <p class="m20">以下是被删除的订单信息，可对这些信息进行恢复</p>
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>订单id</th>
                                    <th>订单总价格</th>
                                    <th>消费者姓名</th>
                                    <th>消费者手机</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>

                                <tr v-for="item in orderList | filterBy searchTxt" >



                                    <td>
                                        <div class="content">{{item.id}}
                                            <input v-model="editUser.id" type="text" v-if="item.id==nowEditCol" style="margin-left: -2px;margin-top: 5px;">
                                        </div>
                                    </td>



                                    <td>
                                        <div class="content">{{item.sum}}
                                            <input v-model="editUser.address" type="text" v-if="item.id==nowEditCol" style="margin-left: -2px;margin-top: 5px;">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="content">{{item.user.name}}
                                            <input v-model="editUser.address" type="text" v-if="item.id==nowEditCol" style="margin-left: -2px;margin-top: 5px;">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="content">{{item.user.telephone}}
                                            <input v-model="editUser.address" type="text" v-if="item.id==nowEditCol" style="margin-left: -2px;margin-top: 5px;">
                                        </div>
                                    </td>
                                    <td class="table-action">
                                        <a href="#" title="查看详情" data-toggle="modal" data-target=".orderDetails" v-on:click="checkOneOrder(item.id)"><i class="fa fa-list"></i></a>
                                        <a href="#" title="恢复" v-on:click="recyOrder(item.id)"><i class="fa fa-recycle"></i></a>
                                        <a href="#" title="删除" v-on:click="deleteOrder(item.id)"><i class="fa fa-exclamation-triangle"></i></a>
                                    </td>
                                </tr>

                                </tbody>
                            </table>
                        </div>
                        <!-- table-responsive -->
                    </div>


                </div>
                    </div>
                    <!-- panel-body -->
                </div>
                <!-- panel -->
            </div>
            <!-- contentpanel -->
 
        </div>
        <!-- mainpanel -->


        <!--员工详情的模态框-->
        <div class="modal fade bs-example-modal-static" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" data-backdrop="static" aria-hidden="true" >
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>
                        <h4 class="modal-title">个人信息</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-9">
                                <form id="basicForm" action="form-validation.html" class="form-horizontal" >
                                    <div class="panel panel-default">
                                        <div class="panel-body">
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">员工id<span class="asterisk">*</span></label>
                                                <div class="col-sm-9">
                                                    <h5>{{checkOneList.id}}</h5>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">姓名<span class="asterisk">*</span></label>
                                                <div class="col-sm-9">
                                                    <h5>{{checkOneList.name}}</h5>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">性别</label>
                                                <div class="col-sm-9">
                                                    <h5>{{checkOneList.gender}}</h5>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">职位</label>
                                                <div class="col-sm-9">
                                                    <h5>{{checkOneList.position}}</h5>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">手机</label>
                                                <div class="col-sm-9">
                                                    <h5>{{checkOneList.telephone}}</h5>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">住址</label>
                                                <div class="col-sm-9">
                                                    <h5>{{checkOneList.address}}</h5>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">员工描述</label>
                                                <div class="col-sm-9">
                                                    <h5>{{checkOneList.introducation}}</h5>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- panel-body -->
                                    </div>
                                    <!-- panel -->
                                </form>
                            </div>
                            <!-- col-md-9 -->
                            <div class="col-md-3">
                                <img src="images/uploadfile.png" alt="" style="width: 120px; height: 120px;">
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <!--供应商详情的模态框-->
        <div class="modal fade supplierDetails" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" data-backdrop="static" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>
                        <h4 class="modal-title">供应商信息</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-9">
                                <form id="basicForm" action="form-validation.html" class="form-horizontal">
                                    <div class="panel panel-default">
                                        <div class="panel-body">
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">供应商id<span class="asterisk">*</span></label>
                                                <div class="col-sm-9">
                                                    <h5>{{checkOneList.id}}</h5>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">供应商名称<span class="asterisk">*</span></label>
                                                <div class="col-sm-9">
                                                    <h5>{{checkOneList.name}}</h5>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">供应商地址</label>
                                                <div class="col-sm-9">
                                                    <h5>{{checkOneList.address}}</h5>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">供应商手机</label>
                                                <div class="col-sm-9">
                                                    <h5>{{checkOneList.telephone}}</h5>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">供应商简介</label>
                                                <div class="col-sm-9">
                                                    <h5>{{}}</h5>
                                                </div>
                                            </div>


                                        </div>
                                        <!-- panel-body -->
                                    </div>
                                    <!-- panel -->
                                </form>
                            </div>
                            <!-- col-md-9 -->
                            <div class="col-md-3">
                                <img src="images/uploadfile.png" alt="" style="width: 120px; height: 120px;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--订单详情的模态框-->
        <div class="modal fade orderDetails" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" data-backdrop="static" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>
                        <h4 class="modal-title">订单信息</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-9">
                                <form id="basicForm" action="form-validation.html" class="form-horizontal">
                                    <div class="panel panel-default">
                                        <div class="panel-body">
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">订单id<span class="asterisk">*</span></label>
                                                <div class="col-sm-9">
                                                    <h5>{{checkOneList.id}}</h5>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">订单生成时间<span class="asterisk">*</span></label>
                                                <div class="col-sm-9">
                                                    <h5>{{checkOneList.time}}</h5>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">订单总价</label>
                                                <div class="col-sm-9">
                                                    <h5>{{checkOneList.sum}}</h5>
                                                </div>
                                            </div>

                                        </div>
                                        <!-- panel-body -->
                                    </div>
                                    <!-- panel -->
                                </form>
                            </div>
                            <!-- col-md-9 -->
                            <div class="col-md-3">
                                <img src="images/uploadfile.png" alt="" style="width: 120px; height: 120px;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!--modal模态框结束-->
       
    </section>

    <div class="footer" style="text-align: center;">
        &copy; 2018. All Rights Reserved. 超市订单管理系统
    </div>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/jquery-migrate-1.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/modernizr.min.js"></script>
    <script src="js/jquery.sparkline.min.js"></script>
    <script src="js/toggles.min.js"></script>
    <script src="js/retina.min.js"></script>
    <script src="js/jquery.cookies.js"></script>
    <script src="js/jquery.datatables.min.js"></script>
    <script src="js/select2.min.js"></script>
    <script src="js/custom.js"></script>
    <script src="js/vue1.0.js"></script>
    <script src="js/vueJs/mainFunc.js"></script>
    <script>
    jQuery(document).ready(function() {



        jQuery(document).ready(function() {

            recycle.checkAllUser();
            recycle.checkAllSupplier();
            recycle.checkAllOrder();

        });

        jQuery('#table2').dataTable();

        jQuery('#table3').dataTable();

        // Select2
        jQuery('select').select2({
            minimumResultsForSearch: -1
        });

        jQuery('select').removeClass('form-control');

        // Delete row in a table
        jQuery('.delete-row').click(function() {
            var c = confirm("Continue delete?");
            if (c)
                jQuery(this).closest('tr').fadeOut(function() {
                    jQuery(this).remove();
                });

            return false;
        });

        // Show aciton upon row hover
        jQuery('.table-hidaction tbody tr').hover(function() {
            jQuery(this).find('.table-action-hide a').animate({ opacity: 1 });
        }, function() {
            jQuery(this).find('.table-action-hide a').animate({ opacity: 0 });
        });


    });
    </script>
</body>

</html>